<style type="text/css">
.list-row{
  border-bottom: 1px solid #ccc;
  width:187px;
  padding:4px;
  background: #FFF;
  -moz-border-radius: 0px 4px 4px 4px;
  -webkit-border-radius: 0px 4px 4px 4px;
  border-radius: 0px 4px 4px 4px;
}

.listrow-header{
  margin-bottom: 5px;
  cursor: pointer;
  padding:4px;
  background: #B5D9E5;
}
.col{ width: 83px; display: inline-block; vertical-align: top;}
.col-large{ width: 166px; }
.actor-list-row-1:hover{ cursor: pointer}

</style>

<script type="text/javascript">

$(document).ready(function(){
  $('.actor-list-row-1').click(function(){

    var actor_id = $(this).attr('id');
    $('#facade').css('height',$(document).height());
    $('#facade').css('display','block');
    $.ajax({
      url: '/matter/actor/',
      type: 'POST',
      data: { actor_id:actor_id },
      success: function(data){
        $('#actor-details-popup').empty();
        $('#actor-details-popup').html(data);
        $('#actor-details-popup').css('display', 'block');
        $('#facade').css('display','none');
      }
    });
  });

  $('.close-used-in').click(function(){
      $('#actor-details-used-in').css('display', 'none');
  });

});
</script>

<div class="listrow" style="margin: 0 5px 1px;">
<span >Matter Dependencies</span>
<span class="close-used-in ui-icon ui-icon-close" style="float: right;" title="Close"></span>
<div class="list-row"  >
<div class="col">Ref</div>
<div class="col">Role</div>
</div>
<div  style="width: 210px; height: 200px; overflow: auto ">
<?php 
$type = '';
$close_type = 0;
$add_empty_row = 0;

foreach($this->matter_dependencies as $matter){
?>
<div class="list-row"  >
<div class="col"><a href="/matter/view/id/<?= $matter['id']?>" target="_blank"><?= $matter['UID']?></a></div>
<div class="col"><?= $matter['role']?></div>
</div>
<? } ?>
</div>
</div>

<div class="listrow" >
<span >Other Actor Dependencies</span>
<span class="close-used-in ui-icon ui-icon-close" style="float: right;" title="Close"></span>
<div class="list-row"  >
<div class="col">Actor</div>
<div class="col">Dependency</div>
</div>
<div  style="width: 210px; height: 200px; overflow: auto ">
<?php 
$type = '';
$close_type = 0;
$add_empty_row = 0;

foreach($this->other_actor_dependencies as $actor){
?>
<div class="list-row"  >
<div class="col actor-list-row actor-list-row-1" id="<?=$actor['id']?>"><? echo htmlentities($actor['Actor'])?></div>
<div class="col "><? echo htmlentities($actor['Dependency'])?></div>
</div>
<? } ?>
</div>
</div>

